<template>
	<view>
		<!-- <image src="/static/image/userImg/bg.png" mode="" class="bgImg"></image> -->
		<!-- 	<view class="searchBox pL15 pR15 ">
			<u-search placeholder="搜索" v-model="query.oddJobName" height="80" :show-action="false"
				bg-color="#F7F8FB" shape="square" @change='search'>
			</u-search>
			
		</view> -->
		<view class="pL15 pR15">
			<view class="flex alg-center jst-between mT10">
				<view @click="changeTab(item,i)" class="tabItem font32" :class="curretnTab==i?'active':''"
					v-for="(item,i) in tabLis" :key="i">
					<text class="relative">{{item.text}}</text>
				</view>
			</view>
		</view>
		<mescroll-uni class="lisBox" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="downOption" :up="upOption" :bottombar="false" :top="100">
			<view class="pB15 mL15 mR15">
				<view class="oddItem mB15" @click="xf.onlineUtils.route(`pages/common/ssDetail/index?id=${item.id}`)"
					v-for="(item,i) in list" :key="i">
					<view class="flex alg-center jst-between font15">
						<view class="txt-ellipsis w75 font18">{{item.complaintsTime}}</view>
						<view class="u-blue font15">
							{{item.complaintsTypeText}}
						</view>
					</view>
					<view class="flex font28 mT10 flex jst-between">
						<text class="font18">{{item.oddJobName}}</text>
						<view class="u-red">
							<text class="font20">{{item.salary}}</text>
							<text class="font13">元</text>
						</view>
					</view>
					<view class="flex font28 mT10 line24">
						{{item.complaintsReason}}
					</view>
					<view class="flex jst-between mT5 alg-center">
						<view class="font14 u-8bd">查看详情</view>
						<view v-if="item.complaintsType=='0'" class="pointer bmBtn" @click.stop="canselSs(item)">取消申诉
						</view>
					</view>
				</view>

			</view>
		</mescroll-uni>
		<xfTipModal ref="tipModal"></xfTipModal>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		getSsLis,
		cancelSs
	} from '@/api/userInterface/user.js'

	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				downOption: {
					use: true,
					auto: false
				},
				query: {
					complaintsType: '',
					oddJobName: ''
				},
				upOption: {
					page: {
						num: 0,
						size: 10,
						time: null
					},
					empty: {
						use: true,
						icon: '/static/image/nodata.png',
						tip: "暂无数据",
						fixed: true
					},
					textNoMore: "到底啦~",
				},
				list: [],
				curretnTab: 0,
				tabLis: [{
					text: "全部",
					value: ''
				}, {
					text: "申诉中",
					value: '0'
				}, {
					text: "已结束",
					value: '10'
				}],


			};
		},
		onShow(e) {
			this.getJobStatus()
		},
		methods: {
			getJobStatus() {
				this.tabLis = [{
					text: '全部',
					value: ''
				}];
				this.baseStore.getDictionaryDataAll('jjp_oddjob_complaints_type').then(res => {
					let d = res.sort((a, b) => a.value - b.value)
					this.tabLis = this.tabLis.concat(this.xf.deepClone(d))

				})
			},
			canselSs(v) {
				let that = this;
				this.$refs.tipModal.open({
					content: "您确定取消申诉吗？",
					btnText: "取消申诉",
					showCancel: true,
					success: function() {
						cancelSs({
							id: v.id
						}).then(res => {

							if (res.success == true) {
								uni.showToast({
									icon: 'none',
									title: "取消申诉成功!",
									duration: 2000
								})
								that.list = [];
								that.mescroll.resetUpScroll();
							}

						})
					}
				})

			},
			changeTab(v, i) {
				this.curretnTab = i;
				this.query.complaintsType = v.value;
				this.search()
			},

			search() {
				this.list = [];
				this.mescroll.resetUpScroll();
			},
			async upCallback(page) {
				if (page.num == 1) this.list = [];
				this.query.pageNo = page.num;
				getSsLis(this.query).then(res => {

					let list = res.result.records;
					this.list = this.list.concat(list);
					this.mescroll.endSuccess(res.result.records.length);
				}).catch(err => {
					this.mescroll.endByPage(0, 0);
					this.mescroll.endSuccess(1);
					this.mescroll.endErr();
				})

			},
		}
	};
</script>
<style lang="scss">
	page {
		min-height: 100%;
		background: linear-gradient(0deg, #F8FAFF, #EBF0FF);
	}
</style>
<style scoped lang="scss">
	.oddItem {
		padding: 34rpx 28rpx;
		background: #FFFFFF;
		// box-shadow: 1rpx 0rpx 10rpx 0rpx #000000;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.selImg {
		width: 40rpx;
		height: 40rpx;
	}

	.tabItem {
		margin-right: 58rpx;
		position: relative;

		.relative {
			z-index: 1;
		}

		&:first-child {
			margin-left: 20rpx;
		}

		&:last-child {
			margin-right: 30rpx;
		}

		&.active {
			font-weight: bold;

			&:before {
				content: "";
				position: absolute;
				bottom: 0;
				z-index: 0;
				width: 100%;
				height: 10rpx;
				background: linear-gradient(to right, #3291F8, #E4F1FE);
				border-radius: 2rpx 2rpx 2rpx 2rpx;
			}
		}
	}


	#scroll-view-h {
		/* #ifdef MP-WEIXIN */
		// height: calc(100vh - 240rpx);
		/* #endif */
		/* #ifdef H5 */
		// height: 100%;
		/* #endif */

	}


	// .searchBox {
	// 	position: relative;
	// 	z-index: 1;
	// 	border-bottom-left-radius: 40rpx;
	// 	border-bottom-right-radius: 40rpx;
	// }
</style>